.demo-color-picker-normal {
  width: 100px;

  .nova-color-picker-border {
    width: 100px;
  }

  &:not(.nova-color-picker-disabled) {
    &:hover {
      .demo-color-picker-normal-trigger {
        border: var(--nova-border-primary);
      }
    }
  }

  &.nova-dropdown-opened .demo-color-picker-normal-trigger,
  &:not(.nova-color-picker-disabled) .demo-color-picker-normal-trigger:focus {
     {
      border: var(--nova-border-primary);
      box-shadow: var(--nova-shadow-primary);
    }
  }
}

.demo-color-picker-normal-preset-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5px;
  grid-column: 1/-1;

  ul {
    display: flex;
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
    width: 20px;
    height: 20px;

    &.demo-color-picker-normal-preset-selected {
      border: 2px solid var(--nova-color-font);
      box-shadow: inset 0 0 0 1px var(--nova-color-bg);
    }
  }
}

.demo-color-picker-normal-trigger {
  padding: 4px;
  width: 100px;
  display: flex;
  align-items: center;
  font-size: 14px;
  border: var(--nova-border);
  border-radius: var(--nova-radius);
  transition: var(--nova-transition-component);
  background-color: var(--nova-color-bg-component);

  &:focus {
    outline: none;
  }

  i {
    width: 10px;
    height: 10px;
    margin: 5px;
  }
}
